<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
            @font-face {
                font-family: "remixicon";
                src: url('../static/icon/remixicon.eot?t=1617020570143'); /* IE9*/
                src: url('../static/icon/remixicon.eot?t=1617020570143#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url("../static/icon/remixicon.woff2?t=1617020570143") format("woff2"),
                url("../static/icon/remixicon.woff?t=1617020570143") format("woff"),
                url('../static/icon/remixicon.ttf?t=1617020570143') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
                url('../static/icon/remixicon.svg?t=1617020570143#remixicon') format('svg'); /* iOS 4.1- */
                font-display: swap;
            }
            div{
                position: relative;
                width: 200px;
                height: 35px;
                border: 1px solid red;
            }

            div::after {
                font-family: "remixicon";
                position: absolute;
                left: 0;
                top: 0;
                content:'\f04a';
                width: 20px;
                height: 20px;
            }
    </style>
</head>

<body>
    <div>
        <i class="ri-home-smile-2-fill"></i>
    </div>
</body>

</html>